.lv-advanced-filter {
  position: relative;
  display: block;
  min-width: 2.72rem;
  max-width: 100%;
  height: $height-base;
  color: $text-color;
  font-size: $font-size-base;
  font-family: $font-family;
  line-height: $line-height-base;
  &:focus-visible {
    outline: none;
  }
}

$advanced-filter-color: (default, $border-color-base, $input-background, $text-color),
  (hover, $border-color-hover, $lv-advanced-filter-input-bg-color, $text-color),
  (focus, $input-border-color-focus, $lv-advanced-filter-input-bg-color, $text-color),
  (active, $border-color-active, $lv-advanced-filter-input-bg-color, $text-color),
  (disabled, $border-color-disabled, $disabled-background, $text-color-disabled) !default;

@include colorState('.lv-advanced-filter-container', $advanced-filter-color);

.lv-advanced-filter-container {
  display: flex;
  align-items: center;
  width: auto;
  min-width: 2.72rem;
  max-width: 100%;
  padding: 0 $padding-md 0 $padding-sm;
  color: $lv-advanced-filter-input-icon-color;
  font-size: $font-size-base;
  line-height: 0.22rem;
  background-color: $lv-advanced-filter-input-bg-color;
  border-color: $border-color-base;
  border-style: $border-style-base;
  border-width: $border-width-base;
  border-radius: $border-radius-md;
  @include motion-input;

  &.lv-advanced-filter-container-focus {
    color: nth(nth($input-color, 3), 4);
    border-color: nth(nth($input-color, 3), 2);
  }

  .lv-advanced-filter-toggle {
    min-width: 1.94rem; // TODO 规范制定后修改
    padding-left: 0;
    background-color: $background-color-default-stroke;
    border: none;
    border-radius: 0;
  }
}

.lv-advanced-filter-icon {
  flex: 0 0 auto;
  align-items: center;
  height: 0.3rem;
  font-size: $font-size-lg;
}

.lv-advanced-filter-wrapper {
  width: 100%;
  height: 100%;
  margin: -0.01rem $margin-sm;
  overflow-x: overlay;
  overflow-y: hidden;

  @include component-scroll;

  .lv-advanced-filter-filters-container {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
  }
}

.lv-advanced-filter-wrapper-has-scroll {
  height: 0.36rem;
  margin-bottom: -0.06rem;
  margin-top: -0.06rem;
}

.lv-advanced-filter-container-wrap {
  position: absolute;
  top: 0;
  left: 0;
  align-items: flex-start;
  width: 100%;
  overflow: hidden;

  .lv-advanced-filter-wrapper {
    overflow-x: hidden;
    overflow-y: overlay;
  }

  .lv-advanced-filter-tag-container {
    flex-wrap: wrap;
  }

  .lv-advanced-filter-input-container {
    width: auto;
  }
}

.lv-advanced-filter-panel-container,
.lv-advanced-filter-popover-container {
  .lv-popover-container {
    min-width: 2.72rem;
  }

  &.lv-popover .lv-popover-inner {
    padding: 0;
    overflow: hidden;
    border-radius: $border-radius-md;
  }

  .lv-advanced-filter-tree {
    min-width: 2.72rem;
    max-width: 3.6rem;
    margin-top: $margin-xs;
    padding: 0 $padding-xs;
  }
}

.lv-advanced-filter-panel-container {
  &.lv-popover-position-bottom .lv-popover-container,
  &.lv-popover-position-bottomLeft .lv-popover-container,
  &.lv-popover-position-bottomRight .lv-popover-container {
    margin-top: $margin-sm;
  }

  &.lv-popover-position-top .lv-popover-container,
  &.lv-popover-position-topLeft .lv-popover-container,
  &.lv-popover-position-topRight .lv-popover-container {
    margin-bottom: $margin-sm;
  }

  &.lv-popover.lv-popover-theme-light .lv-popover-inner {
    background-color: $lv-advanced-filter-popover-bg-color;
  }
}

.lv-advanced-filter-input-number-container,
.lv-advanced-filter-text-input-container {
  padding: $padding-md;

  .lv-advanced-filter-footer {
    padding: 0 0 $padding-md;
  }
}

.lv-advanced-filter-dateRange-picker-container {
  .lv-advanced-filter-footer {
    padding: 0 $padding-xl $padding-lg;
  }
}

.lv-advanced-filter-tag-container {
  display: flex;
  flex: 1 1 auto;
  margin-right: $margin-sm;

  .lv-tag-item {
    cursor: pointer;

    .lv-tag-text {
      white-space: nowrap;
    }
  }
}

.lv-advanced-filter-input-container {
  flex: 0 1 auto;
  width: 100%;
}

.lv-advanced-filter-clear-btn {
  width: auto;
}

.lv-advanced-filter-clear-btn.lv-button.lv-button-size-auto {
  height: 0.3rem;
}

.lv-advanced-filter-footer {
  display: flex;
  justify-content: flex-end;
  width: 100%;
  padding: 0 $padding-sm $padding-md;
}

.lv-advanced-filter-search-readonly {
  color: $text-color-secondary;
  font-weight: $font-weight-regular;
  font-size: $font-size-sm;
}

.lv-advanced-filter-tree-panel {
  max-height: 2.88rem;
  padding: 0 0 0 $padding-sm;
  overflow: auto;

  @include component-scroll;
}
